<template>
  <a-card>
    <div class="action-container">
      <div>
        您有
        <span style="margin: 0 6px; color: #f5222d">{{ unreadInfo.unreadCount }}</span>
        条未读消息
      </div>
      <div>
        <a-button size="small" @click="readAllMsg">标记为已读</a-button>
      </div>
    </div>
    <a-divider />
    <a-list item-layout="horizontal" :data-source="msgData">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta>
            <template #title>
              <a href="#" style="font-size: 16px; font-weight: 700">{{ item.title }}</a>
              <span class="text-secondary m-l-1">{{
                dayjs(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
              }}</span>
            </template>
            <template v-if="item.event != 0" #description>
              <div style="max-height: 100px; overflow: hidden" v-html="item.content"></div>
            </template>
            <template #avatar>
              <a-avatar src="https://joeschmoe.io/api/v1/random" />
            </template>
          </a-list-item-meta>
          <template #actions>
            <a key="list-loadmore-more" @click="readInfo(item)">查看详情</a>
            <a
              v-show="item.UseMessage == 0"
              key="list-loadmore-edit"
              @click="readMsgFunc([item.id])"
              >标记为已读</a
            >
          </template>
        </a-list-item>
      </template>
    </a-list>
    <div style="display: flex; justify-content: end">
      <a-pagination
        v-model:current="page"
        show-quick-jumper
        :total="unreadInfo.total"
        @change="onPageChange"
      />
    </div>
  </a-card>

  <a-modal v-model:open="open" width="800px" :title="modal.title" @ok="open = false">
    <div id="model-content" style="padding: 16px" v-html="modal.content"></div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue';
  import { getMsg, ReadMsgApi } from '@/api/user';
  import dayjs from 'dayjs';
  import { message } from 'ant-design-vue';

  const open = ref(false);
  const modal = ref({
    title: '',
    content: '',
  });
  const page = ref(1);
  const pageSize = ref(20);

  const props = defineProps({
    event: {
      type: Number,
      default: 0,
    },
  });

  const msgData = ref([]);

  const unreadInfo = ref({
    unreadCount: 0,
    total: 0,
  });

  const readInfo = (info) => {
    modal.value = info;
    open.value = true;
    if (info.UseMessage == 0) {
      readMsgFunc([info.id]);
    }
  };

  const loadData = async () => {
    const params = {
      page: page.value,
      pageSize: pageSize.value,
      event: 0,
    };
    params.event = props.event;
    const data = await getMsg(params);
    if (data) {
      msgData.value = data.list;
      unreadInfo.value = {
        unreadCount: data.unreadMessages,
        total: data.total,
      };
    }
  };

  watch(
    () => props.event,
    () => {
      msgData.value = [];
      loadData;
    },
  );

  onMounted(() => {
    loadData();
  });

  const readAllMsg = async () => {
    const ids = [];
    msgData.value.forEach((item) => {
      ids.push(item.id);
    });
    await ReadMsgApi({ ids });
    loadData();
  };

  const readMsgFunc = (ids: number[]) => {
    ReadMsgApi({ ids }).then(() => {
      loadData();
      message.success('标记为已读');
    });
  };

  const onPageChange = (pageNumber: number) => {
    page.value = pageNumber;
    loadData();
  };
</script>

<style scoped lang="less">
  .ant-card + .ant-card {
    margin-top: 16px;
  }

  .text-secondary {
    color: rgb(0 0 0 / 45%);
  }

  .m-l-1 {
    margin-left: 8px;
  }

  .action-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #model-content {
    width: 100%;
    height: 100%;

    :deep(img) {
      width: 100% !important;
      object-fit: cover !important;
    }
  }
</style>
